<script>
import {defineComponent} from 'vue';
import HeaderComponent from "../common/header.vue"
import FooterComponent from "../common/footer.vue"
import axios from 'axios';
var xmlHttpRequest
export default defineComponent({
    name: "Main",
    components:{HeaderComponent, FooterComponent},
  data(){

      return{
        informContent: String
    };
  },
methods: {
      goToCategory(aaa){
      window.location.href = 'http://localhost:5173/catalog/'+aaa;
    },
    showInform(categoryId) {
  console.log(categoryId + "aaa");
  axios.post('http://localhost:8090/catalog/categoryShowJsServlet', {
                categoryId: categoryId
            },{
                headers: {
                'Content-Type': 'multipart/form-data',
                }
            }).then(
                response => {
                  const data = response.data;
                  console.log(data);
                  var inform = document.getElementById("inform");
                    inform.innerHTML = data.data;
                   inform.style.display = "block";
                }
  )
 //this.sendRequest("/catalog/categoryShowJsServlet?categoryId=" + categoryId);

},

//隐藏悬浮层
 hiddenInform(event) {
  var informDiv = document.getElementById('inform');
  var x = event.clientX;
  var y = event.clientY;
  var divx1 = informDiv.offsetLeft;
  var divy1 = informDiv.offsetTop;
  var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
  var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
  if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
    document.getElementById('inform').style.display = 'none';
  }
},
},
})
</script>

<template>
    <HeaderComponent />
  <img align="middle" class="background1" src="../../assets/images/white.jpg" />
  <br />
  <div id="Main" class="Main">

    <div id="Sidebar" class="Sidebar">
      <h1>Product list</h1>
      <div>
        <a href="/catalog/FISH"><img src="../../assets/images/fish_icon.gif" /></a><br />
        Saltwater, Freshwater <br />
      </div>
      <div>
        <a href="/catalog/DOGS"><img src="../../assets/images/dogs_icon.gif" /></a><br />
        Various Breeds <br />
      </div>
      <div>
        <a href="/catalog/ATS"><img src="../../assets/images/cats_icon.gif" /></a><br />
        Various Breeds, Exotic Varieties <br />
      </div>
      <div>
        <a href="/catalog/REPTILES"><img src="../../assets/images/reptiles_icon.gif" /></a><br />
        Lizards, Turtles, Snakes <br />
      </div>
      <div>
        <a href="/catalog/BIRDS"><img src="../../assets/images/birds_icon.gif" /></a><br />
        Exotic Varieties
      </div>
      <br />
    </div>
    <!-- 轮播图 -->
    <div class="banner-container">
      <input
          type="radio"
          name="radio-set"
          checked="checked"
          id="banner-control-1"
      />
      <a class="banner-nav-a" href="#banner01"></a>
      <input type="radio" name="radio-set" id="banner-control-2" />
      <a class="banner-nav-a" href="#banner02"></a>
      <input type="radio" name="radio-set" id="banner-control-3" />
      <a class="banner-nav-a" href="#banner03"></a>
      <input type="radio" name="radio-set" id="banner-control-4" />
      <a class="banner-nav-a" href="#banner04"></a>
      <input type="radio" name="radio-set" id="banner-control-5" />
      <a class="banner-nav-a" href="#banner05"></a>
      <div class="banner-img-container">
        <img
            id="banner01"
            src="../../assets/images/act1.jpg"
            alt="REPTILES"
            @click="goToCategory('REPTILES')"
            @mouseover="showInform('REPTILES')"
            @mouseout="hiddenInform"
        />
        <img
            id="banner02"
            src="../../assets/images/act2.jpg"
            alt="BIRDS"
            @click="goToCategory('BIRDS')"
            @mouseover="showInform('BIRDS')"
            @mouseout="hiddenInform"
        />
        <img
            id="banner03"
            src="../../assets/images/act3.png"
            alt="FISH"
            @click="goToCategory('FISH')"
            @mouseover="showInform('FISH')"
            @mouseout="hiddenInform"
        />
        <img
            id="banner04"
            src="../../assets/images/act4.webp"
            alt="DOGS"
            @click="goToCategory('DOGS')"
            @mouseover="showInform('DOGS')"
            @mouseout="hiddenInform"
        />
        <img
            id="banner05"
            src="../../assets/images/act5.jpg"
            alt="CATS"
            @click="goToCategory('CATS')"
            @mouseover="showInform('CATS')"
            @mouseout="hiddenInform"
        />
      </div>
    </div>
      <div id="inform" class="inform" style="display: none">1111</div>
  </div>

<FooterComponent />
</template>

<style scoped>
  @import "../../assets/css/main.css";

</style>